#root {
    /* min-height: 100vh; */
    height: 100%;
  }
  
  .layout-container {
    /* min-height: 100vh !important; */
    height: 100% !important;
  }
  .navigation-loader {
    position: absolute;
    height: 3px;
    width: 100vw;
    /* background-color: var(--semi-color-primary); */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
  
    -webkit-animation: Gradient 3s ease infinite;
    animation: Gradient 3s ease infinite;
  }
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  .transition-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  
    transition: backdrop-filter 0.3s ease-in-out;
    -webkit-transition: backdrop-filter 0.3s ease-in-out;
  
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  .transition-mask.active {
    z-index: 999;
  
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
  }
  
  @keyframes logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
    }
  }
  